<template>
  <div
    class="zz-dialog-con"
    :class="{'zz-dialog-bg': isBackground}"
    v-if="show"
    @click.self="handleWrapperClick">
    <div
      class="zz-dialog"
      :class="{'dia-shadow': !isBackground, 'zz-dialog-blue': isBlueground, 'zz-dialog-default': !isBlueground}"
      ref="dialog"
      :style="style">
      <div class="zz-dialog-header border-bottom clear" v-if="showHeader">
        <slot name="title">
          <p class="zz-dialog-title orange">{{title}}</p>
          <span v-if="titleTip" style="vertical-align: text-bottom; color: #939997; font-size: 14px; margin-left: 10px">{{titleTip}}</span>
        </slot>
        <div class="zz-dialog-headerbtn" v-if="showBut">
          <i class="iconfont icon-x" @click.stop='close()'></i>
        </div>
      </div>

      <div class="zz-dialog-body"><slot></slot></div>

      <div class="zz-dialog-footer border-top" v-if="showFoot">
        <div class="foot-confirm">
          <slot name="footer-left">
            <button class="confirm pointer" v-if="leftVal" type="button" @click.stop="leftHandle">{{leftVal}}</button>
          </slot>
          <div class="footer-right" v-if="showConfirm">
            <button class="cancel pointer" v-if="defineVal && !isdefineRight" type="button" @click.stop="defineHandle">{{defineVal}}</button>
            <button class="cancel pointer" v-if="showCancel" type="button" @click.stop="cancel">{{cancelVal}}</button>
            <button class="confirm pointer" type="button" @click.stop="confirm">{{confirmVal}}</button>
            <button class="cancel pointer" style="margin-left: 7px" v-if="defineVal && isdefineRight" type="button" @click.stop="defineHandle">{{defineVal}}</button>
          </div>
        </div>
        <slot name="other"></slot>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'zz-dialog',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      closeOnClickModal: {
        type: Boolean,
        default: false
      },
      showHeader: {
        type: Boolean,
        default: true
      },
      showBut: {
        type: Boolean,
        default: true
      },
      showFoot: {
        type: Boolean,
        default: true
      },
      showConfirm: {
        type: Boolean,
        default: true
      },
      showCancel: {
        type: Boolean,
        default: true
      },
      reset: {
        type: Boolean,
        default: false
      },
      confirmVal: {
        type: String,
        default: '确定'
      },
      cancelVal: {
        type: String,
        default: '取消'
      },
      isBackground: {
        type: Boolean,
        default: true
      },
      isBlueground: {
        type: Boolean,
        default: false
      },
      isdefineRight: {
        type: Boolean,
        default: false
      },
      defineVal: '',
      leftVal: '',
      titleTip: {
        type: String,
        default: ''
      }
    },
    watch: {
      visible: {
        handler (val, oldVal) {
          if (this.reset && !val) {
            this.resetData()
          }
          this.show = val
        },
        deep: true
      }
    },
    data () {
      return {
        show: false,
        style: {}
      }
    },
    mounted () {
      this.show = this.visible
    },
    methods: {
      handleWrapperClick () {
        if (this.closeOnClickModal) {
          this.close()
        }
      },
      close () {
        this.$emit('close')
      },
      resetData () {
        this.$store.commit('reset')
      },
      confirm () {
        this.$emit('confirm')
      },
      cancel () {
        this.$emit('cancel')
        this.close()
      },
      defineHandle () {
        this.$emit('defineHandle')
      },
      leftHandle () {
        this.$emit('leftHandle')
      }
    }
  }
</script>

<style scoped lang="scss">
  .zz-dialog-con{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    .zz-dialog-blue{
      background: #0a3a50;
      color: #a8c5ed;
      .border-bottom{
        border-bottom: 1px solid #0f4e6d;
      }
      .border-top{
        border-top: 1px #0f4e6d solid;
      }
    }
    .zz-dialog-default{
      background: #fff;
      .border-bottom{
        border-bottom: 1px solid $color-line;
      }
      .border-top{
        border-top: 1px $color-line solid;
      }
    }
    .zz-dialog{
      min-width: 240px;
      width: 50% \0/IE9;
      margin: 0 auto \0/IE9;
      max-height: 100%;
      box-sizing: border-box;
      border-radius: 3px;
    }
    .zz-dialog-header{
      height: 15px;
      line-height: 15px;
      padding: 15px 20px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      .zz-dialog-title{
        margin: 0;
        float: left;
        font-size: $font-size-base;
      }
      .zz-dialog-headerbtn{
        float: right;
        color: #afbcc2;
        cursor: pointer;
      }
      .zz-dialog-headerbtn:hover{
        color: $red;
      }
      .icon-x{
        font-size: 24px
      }
    }
    .zz-dialog-body{
      padding: 20px;
    }
    .zz-dialog-footer{
      padding: 15px 20px 15px 15px;
      .foot-confirm{
        height: 30px;
        line-height: 30px;
      }
      .confirm{
        @include button-b($color, #fff, 0px);
        min-width: 40px;
        margin-left: 7px;
      }
      .cancel{
        @include button-b(#afbcc2, $color-font, 0px);
        background: #fff;
        min-width: 40px;
      }
      .footer-right{
        float: right;
        text-align: right;
      }
    }
  }
  .zz-dialog-bg{
    background-color: rgba(0,0,0,.5);
  }
</style>
